<template>
  <div class="large-screen-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="title">{{ title }}</div>
      <div class="tools">
        <el-button-group>
          <el-button type="primary" @click="handleEdit">编辑</el-button>
          <el-button type="success" @click="handleSave">保存</el-button>
          <el-button @click="handleFullScreen">全屏</el-button>
        </el-button-group>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content" ref="screenRef">
      <grid-layout
        v-if="layout.length"
        v-model:layout="layout"
        :col-num="24"
        :row-height="30"
        :margin="[10, 10]"
        :is-draggable="isEditing"
        :is-resizable="isEditing"
        :vertical-compact="false"
        :use-css-transforms="true"
        @layout-updated="handleLayoutUpdated"
      >
        <grid-item
          v-for="item in layout"
          :key="item.i"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
        >
          <chart-panel
            :chart-data="item"
            :is-editing="isEditing"
            @edit="handleChartEdit"
            @delete="handleChartDelete"
          />
        </grid-item>
      </grid-layout>
      
      <!-- 添加图表按钮 -->
      <el-button
        v-if="isEditing"
        class="add-chart-btn"
        type="primary"
        :icon="Plus"
        circle
        @click="handleAddChart"
      />
    </div>
    
    <!-- 图表配置抽屉 -->
    <chart-config-drawer
      v-model="showConfigDrawer"
      :chart-data="currentChart"
      @confirm="handleConfigConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import VueGridLayout from 'vue-grid-layout';
const { GridLayout, GridItem } = VueGridLayout;
import ChartPanel from './components/ChartPanel.vue';
import ChartConfigDrawer from './components/ChartConfigDrawer.vue';
import screenfull from 'screenfull';
import { useLargeScreenStore } from '@/stores/largeScreen';

interface LayoutItem {
  i: string;
  x: number;
  y: number;
  w: number;
  h: number;
  type: string;
  title: string;
  config: Record<string, any>;
  dataSource: {
    type: 'static' | 'api' | 'sql';
    data?: string;
    url?: string;
    method?: string;
    params?: string;
    sql?: string;
  };
  moved?: boolean;
  static?: boolean;
}

const screenStore = useLargeScreenStore();
const title = ref('数据可视化大屏');
const isEditing = ref(false);
const layout = ref<LayoutItem[]>([]);
const showConfigDrawer = ref(false);
const currentChart = ref<LayoutItem | null>(null);
const screenRef = ref<HTMLElement | null>(null);

// 初始化数据
onMounted(async () => {
  await screenStore.loadLayout();
  layout.value = screenStore.layout;
});

// 编辑模式
const handleEdit = () => {
  isEditing.value = true;
};

// 保存布局
const handleSave = async () => {
  await screenStore.saveLayout(layout.value);
  isEditing.value = false;
};

// 全屏切换
const handleFullScreen = () => {
  if (screenfull.isEnabled && screenRef.value) {
    screenfull.toggle(screenRef.value);
  }
};

// 布局更新
const handleLayoutUpdated = (newLayout: LayoutItem[]) => {
  // 过滤掉一些内部属性
  layout.value = newLayout.map(item => ({
    i: item.i,
    x: item.x,
    y: item.y,
    w: item.w,
    h: item.h,
    type: item.type,
    title: item.title,
    config: item.config,
    dataSource: item.dataSource
  }));
};

// 添加图表
const handleAddChart = () => {
  currentChart.value = {
    i: `chart-${Date.now()}`,
    x: 0,
    y: 0,
    w: 8,
    h: 8,
    type: 'line',
    title: '新建图表',
    config: {},
    dataSource: {
      type: 'static',
      data: '[]'
    }
  };
  showConfigDrawer.value = true;
};

// 编辑图表
const handleChartEdit = (chart: LayoutItem) => {
  currentChart.value = { ...chart };
  showConfigDrawer.value = true;
};

// 删除图表
const handleChartDelete = (chartId: string) => {
  layout.value = layout.value.filter(item => item.i !== chartId);
};

// 配置确认
const handleConfigConfirm = (config: LayoutItem) => {
  const index = layout.value.findIndex(item => item.i === config.i);
  if (index === -1) {
    layout.value.push(config);
  } else {
    layout.value[index] = config;
  }
  showConfigDrawer.value = false;
};

// 清理
onUnmounted(() => {
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    screenfull.exit();
  }
});
</script>

<style lang="scss" scoped>
.large-screen-container {
  width: 100%;
  height: 100vh;
  background: #0f1621;
  color: #fff;
  
  .header {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    
    .title {
      font-size: 24px;
      font-weight: bold;
    }
  }
  
  .content {
    height: calc(100vh - 60px);
    padding: 20px;
    position: relative;
    overflow: auto;
    
    .add-chart-btn {
      position: fixed;
      right: 40px;
      bottom: 40px;
      z-index: 100;
    }
  }
}

:deep(.vue-grid-layout) {
  background: transparent;
  width: 100% !important;
  min-height: 100% !important;
}

:deep(.vue-grid-item) {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  
  &.vue-draggable-dragging {
    z-index: 100;
  }

  // 修改拖拽手柄样式
  .vue-draggable-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    cursor: move;
    border-radius: 0 4px 0 4px;
    
    &:hover {
      background: rgba(255,255,255,0.2);
    }
  }

  // 修改调整大小手柄样式
  .vue-resizable-handle {
    background: rgba(255,255,255,0.1);
    border-radius: 0 0 0 4px;
    
    &:hover {
      background: rgba(255,255,255,0.2);
    }
  }
}
</style> 